/**
 * @description 订单导航 - Yuanr
 */
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import styles from '../styles/common';

export default class OrderNav extends Component {
  // constructor(props) {
  //   super(props);
  // }
  render() {
    const { navList, activeIndex, clickItem } = this.props;
    const navHTML = [];
    const len = navList.length;
    for (let i = 0; i < len; i++) {
      navHTML.push(<Text style={[ordernav.orderNavItem, i === activeIndex ? ordernav.active : '']} key={i} onPress={() => clickItem(i)}>{navList[i].title}</Text>);
    }
    return (
      <View style={[styles.flexbox, ordernav.orderNavWrap]}>{navHTML}</View>
    );
  }
}

const ordernav = StyleSheet.create({
  orderNavWrap: {
    flex: 1,
    justifyContent: 'space-between',
    backgroundColor: '#eee',
    paddingLeft: 10,
    paddingRight: 10
  },
  orderNavItem: {
    textAlign: 'center',
    height: SCALE(80),
    lineHeight: SCALE(80),
    fontSize: FONT(16),
    color: '#202020'
  },
  active: {
    color: '#f38421'
  }
});
